<template>
  <div>{{ x }} -- {{ y }}</div>
  <!-- <div>{{ position.x }} -- {{ position.y }}</div> -->
</template>

<script>
// import { MoveMixin } from "./MoveMixin";
import { useMove } from "./useMove";
import { toRefs } from "vue";
export default {
  setup() {
    // const { x, y } = useMousePosition();
    // 响应式数据丢失的问题
    const { x, y } = toRefs(useMove());
    // 这个东西不是一个响应式数据的话 直接给视图的话，后面值的更新就和 视图没关系了
    // 响应式对象
    console.log(x, y);

    // return {
    //   position,
    // };
    return {
      x,
      y,
    };
  },
  //   data() {
  //     return {
  //       x: 0,
  //       y: 0,
  //     };
  //   },
  //   mounted() {
  //     window.addEventListener("keyup", this.handleKeyup);
  //   },
  //   unmounted() {
  //     window.removeEventListener("keyup", this.handleKeyup);
  //   },
  //   methods: {
  //     handleKeyup(e) {
  //       switch (e.code) {
  //         case "ArrowRight":
  //           this.x += 1;
  //           break;
  //         case "ArrowLeft":
  //           this.x -= 1;
  //           break;
  //         case "ArrowUp":
  //           this.y -= 1;
  //           break;
  //         case "ArrowDown":
  //           this.y += 1;
  //           break;
  //         default:
  //           break;
  //       }
  //     },
  //   },
  // mixin 复用逻辑的方式
  // otherMixin x y
  // 命名冲突的问题
  // 从哪里来的？
  //   mixins: [MoveMixin, otherMixin, fooMixin, barMixin, bazMixin],
};
</script>

<style></style>
